<template>
  <el-dialog v-model="addOrEditVisible" title="订单信息" :before-close="closeEditDialog"
             width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
             :size="formSize" status-icon>
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="" prop="id">-->
<!--            <el-input v-model="ruleForm.id"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单流水号" prop="shopNumber">
            <el-input v-model="ruleForm.orderId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单类型" prop="orderType">
<!--            <el-input v-model="ruleForm.orderType"/>-->
            <el-select v-model="ruleForm.orderType" placeholder="请选择订单类型" style="width: 100%">
              <el-option label="团购-21" :value=21></el-option>
              <el-option label="预售-31" :value=31></el-option>
              <el-option label="外卖-41" :value=41></el-option>
              <el-option label="外卖-90" :value=90></el-option>
              <el-option label="次卡-51" :value=51></el-option>
              <el-option label="次卡-70" :value=70></el-option>
              <el-option label="券交易-60" :value=60></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单状态" prop="orderStatus">
<!--            <el-input v-model="ruleForm.orderStatus"/>-->
            <el-select v-model="ruleForm.orderStatus" placeholder="请选择订单类型" style="width: 100%">
              <el-option label="初始化" :value=0></el-option>
              <el-option label="待支付" :value=100></el-option>
              <el-option label="订单关闭" :value=101></el-option>
              <el-option label="支付成功" :value=200></el-option>
              <el-option label="待使用" :value=201></el-option>
              <el-option label="交易成功" :value=1></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="账户信息" prop="accountId">
            <el-input v-model="ruleForm.accountId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="账户名称" prop="accountName">
            <el-input v-model="ruleForm.accountName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="门店ID" prop="poiId">
            <el-input v-model="ruleForm.poiId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="门店名称" prop="poiName">
            <el-input v-model="ruleForm.poiName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="商品数量" prop="num">
            <el-input v-model="ruleForm.num"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="商品ID" prop="productId">
            <el-input v-model="ruleForm.productId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="商品名称" prop="productName">
            <el-input v-model="ruleForm.productName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单原始金额" prop="originalAmount">
            <el-input v-model="ruleForm.originalAmount"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单实收金额(核心)" prop="receiptAmount">
            <el-input v-model="ruleForm.receiptAmount"/>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="实收金额" prop="paymentDiscount">-->
<!--            <el-input v-model="ruleForm.paymentDiscount"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="订单金额" prop="payAmount">-->
<!--            <el-input v-model="ruleForm.payAmount"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单时间" prop="payTime">
            <el-input v-model="ruleForm.payTime"/>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="状态 0-停用 1-启用 2-备用" prop="statusFlag">-->
<!--            <el-input v-model="ruleForm.statusFlag"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="是否删除 0-否 1-是" prop="delFlag">-->
<!--            <el-input v-model="ruleForm.delFlag"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="创建人" prop="createUser">-->
<!--            <el-input v-model="ruleForm.createUser"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="创建时间" prop="createTime">-->
<!--            <el-input v-model="ruleForm.createTime"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="修改时间" prop="updateTime">-->
<!--            <el-input v-model="ruleForm.updateTime"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="ruleForm.remark"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeEditDialog">关闭</el-button>
           <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
         </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {RetailOrder} from '@/apis/model/order/RetailOrderModel';
import {insertRetailOrder, updateRetailOrder} from '@/apis/http/order/RetailOrderHttp';

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: RetailOrder,
  addDataType: string
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  id: [
    {required: true, message: '请输入', trigger: 'blur'}
  ],
  shopNumber: [
    {required: true, message: '请输入订单流水号', trigger: 'blur'}
  ],
  orderType: [
    {required: true, message: '请输入订单类型，21-团购，31-预售，41、90-外卖，51、70-次卡，60-券交易', trigger: 'blur'}
  ],
  orderStatus: [
    {
      required: true,
      message: '请输入订单状态（OrderStatus_Init 初始化 OrderStatus = 0OrderStatus_WaitPay 待支付 OrderStatus = 100OrderStatus_Cancel 订单关闭 OrderStatus = 101OrderStatus_PaySuccess 支付成功 OrderStatus = 200OrderStatus_Available 待使用 OrderStatus = 201OrderStatus_Finish 交易成功 OrderStatus = 1）',
      trigger: 'blur'
    }
  ],
  accountId: [
    {required: true, message: '请输入账户信息', trigger: 'blur'}
  ],
  accountName: [
    {required: true, message: '请输入账户名称', trigger: 'blur'}
  ],
  poiId: [
    {required: true, message: '请输入门店ID', trigger: 'blur'}
  ],
  poiName: [
    {required: true, message: '请输入门店名称', trigger: 'blur'}
  ],
  num: [
    {required: true, message: '请输入商品数量', trigger: 'blur'}
  ],
  productId: [
    {required: true, message: '请输入商品ID', trigger: 'blur'}
  ],
  productName: [
    {required: true, message: '请输入商品名称', trigger: 'blur'}
  ],
  originalAmount: [
    {required: true, message: '请输入订单原始金额', trigger: 'blur'}
  ],
  receiptAmount: [
    {required: true, message: '请输入订单实收金额(核心)pay_amount+payment_discount', trigger: 'blur'}
  ],
  paymentDiscount: [
    {required: true, message: '请输入实收金额', trigger: 'blur'}
  ],
  payAmount: [
    {required: true, message: '请输入订单金额', trigger: 'blur'}
  ],
  payTime: [
    {required: true, message: '请输入订单时间', trigger: 'blur'}
  ],
  statusFlag: [
    {required: true, message: '请输入状态 0-停用 1-启用 2-备用', trigger: 'blur'}
  ],
  delFlag: [
    {required: true, message: '请输入是否删除 0-否 1-是', trigger: 'blur'}
  ],
  createUser: [
    {required: true, message: '请输入创建人', trigger: 'blur'}
  ],
  createTime: [
    {required: true, message: '请输入创建时间', trigger: 'blur'}
  ],
  updateTime: [
    {required: true, message: '请输入修改时间', trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertRetailOrder(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateRetailOrder(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }

    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
